import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
import { Tooltip, Title, Paragraph } from '@zendeskgarden/react-tooltips';
import { TooltipStory } from './stories/TooltipStory';
import { TOOLTIP_CONTENT as CONTENT } from './stories/data';
import README from '../README.md';
import { PLACEMENT } from '../src/types';

<Meta
  title="Packages/Tooltips/Tooltip"
  component={Tooltip}
  subcomponents={{
    'Tooltip.Paragraph': Tooltip.Paragraph,
    'Tooltip.Title': Tooltip.Title
  }}
/>

# API

<ArgsTable />

# Demo

<Canvas>
  <Story
    name="Tooltip"
    args={{
      content: CONTENT,
      delayMS: 500,
      hasArrow: true
    }}
    argTypes={{
      isVisible: { control: 'boolean' },
      appendToNode: { control: false },
      fallbackPlacements: { control: 'multi-select', options: PLACEMENT.filter(p => p !== 'auto') }
    }}
    parameters={{
      design: {
        allowFullscreen: true,
        type: 'figma',
        url: 'https://www.figma.com/file/6g87L4FdKZTA3knt3Rsfdx/Garden?node-id=103%3A25293'
      }
    }}
  >
    {args => <TooltipStory {...args} />}
  </Story>
</Canvas>

<Markdown>{README}</Markdown>
